<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="data.js" ></script>
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="select container">
  <div class="select-content">
    <a class="select-title">请选择</a>
  </div>
  <div class="select-content">
    <a class="select-title">请选择</a>
  </div>
  <div class="select-content">
    <a class="select-title">请选择</a>
  </div>
</div>
<script>
  var listWrapper = $("<ul>").addClass("expand list-inline").hide().appendTo(document.body);
  $(".select-content").slice(1).addClass("disabled");
  $(".select").on("click",".select-content",function(e){
    e.stopPropagation();
    var _self = $(this);
    var arr1 = arr;
    var hasUndefined = false;
    $(".select-content").slice(0, _self.index())/*找前面的兄弟节点  slice(start ,end)*/
      .each(function(){
        if($(this).data("selected") == undefined){ /*前面没有选中，终止循环*/
          hasUndefined = true;
          return;
        }
        _self.removeClass("disabled");
        arr1 = arr1[$(this).data("selected")][2];
      });
    if(hasUndefined) {
      return ;
    }
    if(arr1 === undefined) {
      return ;
    }
    _self.append(listWrapper.empty());
    //创建下拉元素
    $.each(arr1, function(idx,v){
      $("<li>").append($("<a>")
        .html(v[1]))
        .data("idx",idx)
        .attr("id",v[0])
        .appendTo(listWrapper);
    });
    if(arr1.length === 1) {
      listWrapper.children().eq(0).trigger("click");
      _self.addClass("disabled");
    } else {
      _self.removeClass("disabled");
      listWrapper.show().children().eq(_self.data("selected")).addClass("selected");
    }
  });

  listWrapper.on("click", "li", function(e){
    e.stopPropagation();
    var _self = $(this);
    var parentBtn = _self.parents(".select-content");
    var hasChanged = parentBtn.data("selected") !== _self.data("idx");
    parentBtn.data("selected",_self.data("idx")).attr("id",_self.attr("id"));
    parentBtn.children(".select-title").html(_self.text());
    listWrapper.hide();
    if(hasChanged){
      parentBtn.nextAll().each(function(i,el){
        $(el).addClass("disabled").removeData("selected").children(".select-title").html("请选择");
      });
    }
    parentBtn.next().trigger("click");
  });

  $(document).on("click",function(){
    listWrapper.hide();
  });
</script>
</body>
</html>